<template>
  <div class="common-page markdown-page">
    <div :class="{'left-warp': true, 'hide': isHide}">
      <div class="toggle-button" @click="isHide = !isHide">
        <em class="el-icon el-icon-d-arrow-left" v-show="!isHide"></em>
        <em class="el-icon el-icon-d-arrow-right" v-show="isHide"></em>
      </div>

      <div class="inner-warp">
        <md-list-panel ref="listPanel" @on-editClick="itemEditClickHandle" @on-listRefresh="listRefreshHandle" :active-item="currentItem"></md-list-panel>
      </div>
    </div>
    <div class="right-warp" v-loading="editLoading">
      <my-empty  v-if="!currentItem"></my-empty>
      <article-editor v-if="currentItem" :editing-article="currentItem" @on-itemSave="itemUpdateHandle"></article-editor> 
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "~@/style/_vars.scss"; 
.markdown-page{
  display: flex;
  flex-flow: row nowrap;
  .left-warp{
    position: relative;
    height: 100%;
    flex: 0 0 20%;
    width: 20%; 
    min-width: 250px;
    transition: all 0.5s;
    background: #d9f7be;
    &.hide{
      flex: 0 0 0%;
      width: 0%; 
      min-width: 0px;
    }
    .toggle-button{
      position: absolute;
      width: 20px;
      height: 60px;
      line-height: 60px;
      top: calc(50% - 30px);
      right: -20px;
      text-align: center;
      border-radius: 0 5px 5px 0;
      cursor: pointer;
      color: white;
      background: $blue-5;
      transition: all 0.5s;
      opacity: 0.3;
      z-index: 4;
      &:hover{
        opacity: 1;
      }
    }
    .inner-warp{
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }
  }
  .right-warp{
    flex: 1;
    height: 100%; 
  }
}
</style>
<script>
import mdArticle from '$my/code/mixin/md-article'
import MdListPanel from '@/components/markdown/md-list-panel'
import ArticleEditor from '@/components/markdown/article-editor'
export default {
  mixins: [mdArticle],
  components: {
    MdListPanel,
    ArticleEditor
  },
  props: {
  },
  data() {
    return {
      isHide: false,
      editLoading: true,
      currentItem: null
    }
  },
  computed: {
  },
  methods: {
    listRefreshHandle(list, total) {
      if (!this.currentItem) {
        if (list.length) {
          this.itemEditClickHandle(list[0])
        } else {
          this.editLoading = false
        }
      }
    },
    itemEditClickHandle(item) { 
      this.editLoading = true
      this.currentItem = null
      this.getMdArticle({id: item.id}).then((res) => { 
        this.editLoading = false
        this.currentItem = res
      })
    },
    itemUpdateHandle(data) {
      console.log('handle')
      this.currentItem = data
      this.$refs.listPanel.updateItem(data)
    } 
  },
  created() {},
  mounted() { 
  }
}
</script>